<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios+vue</title>
</head>

<body>
    <div id="app">
        <input type="button" value="获取笑话" @click="getJoke">
        <p> {{ joke }}</p>
    </div>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        /*
            接口:随机获取一条笑话
            请求地址:https://autumnfish.cn/api/joke
            请求方法:get
            请求参数:无
            响应内容:随机笑话
        */
        // var app = new Vue({
        //     el:"#app",
        //     data:{
        //         joke:"很好笑的笑话"
        //     },
        //     methods: {
        //         getJoke:function(){
        //             // console.log(this.joke);
        //             var that = this;
        //             axios.get("https://autumnfish.cn/api/joke").then(function(response){
        //                 // console.log(response)
        //                 console.log(response.data);
        //                 // console.log(this.joke);
        //                 that.joke = response.data;
        //             },function (err) {  })
        //         }
        //     },
        // })
        var app=new Vue({
            el:'#app',
            data:{
                joke:'很好笑的笑话'
            },
            methods:{
                // async getJoke(){
                //     var res=await axios.get('https://autumnfish.cn/api/joke')
                //     console.log(res)
                //     if (res.status===200){
                //         this.joke=res.data
                //     }
                // },
                getJoke:function () {
                    axios.get('https://autumnfish.cn/api/joke')
                    .then((res)=>{
                        console.log(res)
                        this.joke=res.data
                    },(err)=>{
                        console.log(err)
                    })
                }
            }
        })
    </script>
</body>

</html>
